/* Setting the body size the same as the demo whilst styling */
/* Basics */
body {
  background: #f6f6f5;
}
.jcsdl-container a,
.jcsdl-logic-help {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.jcsdl-steps a {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
/* Header */
.jcsdl-header {
  background: #fff;
  border: 1px solid #ddd;
  padding-bottom: 5px;
}
.jcsdl-header h3 {
  font-weight: bold;
  text-transform: uppercase;
  color: #388cb8;
  font-size: 26px;
}
.jcsdl-header .jcsdl-editor-cancel {
  margin-left: 10px;
  margin-bottom: 8px;
}
.jcsdl-mainview-mode {
  display: none;
}
.jcsdl-container a.jcsdl-btn {
  border-color: #ccc;
  color: #ccc;
  border-radius: 0;
  border: 2px solid #ccc;
  background: #f6f6f5;
  font-size: 11px;
}
.jcsdl-container a.jcsdl-btn:hover {
  border-color: #777;
  color: #777;
}
.jcsdl-container a.jcsdl-btn:hover .jcsdl-logic-help {
  border-color: #777;
  color: #777;
}
.jcsdl-container a.jcsdl-btn.active {
  border-color: #388cb8;
  color: #388cb8;
  background: #deeaf1;
}
.jcsdl-container a.jcsdl-btn.active .jcsdl-logic-help {
  border-color: #388cb8;
  color: #388cb8;
}
.jcsdl-container a.jcsdl-btn.disabled {
  background: #f6f6f5;
}
.jcsdl-container a.jcsdl-btn.jcsdl-add-filter {
  color: #388cb8;
}
.jcsdl-container a.jcsdl-btn.jcsdl-add-filter:hover {
  border-color: #388cb8;
  color: #388cb8;
  background: #deeaf1;
}
.jcsdl-container a.jcsdl-btn.jcsdl-add-filter:hover .jcsdl-picto {
  background-position: -140px -68px !important;
}
.jcsdl-button {
  background: #388cb8;
  text-indent: 0;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  width: auto;
  height: auto;
  padding: 0 16px;
  color: #fff !important;
}
.jcsdl-button:hover {
  background: #222;
}
.jcsdl-button.jcsdl-editor-cancel {
  background: #f6f6f5;
  color: #aaa !important;
}
.jcsdl-button.jcsdl-editor-cancel:hover {
  background: #aaa;
  color: #fff !important;
}
/* Editor */
.jcsdl-advanced-container {
  border: none;
  border-radius: 0;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}
.jcsdl-advanced-gui {
  height: 68px;
}
.jcsdl-advanced-gui-container {
  height: 68px;
}
.jcsdl-logic-token {
  border: 2px solid #ddd;
  border-radius: 0;
}
.jcsdl-logic-token.filter {
  color: #555;
}
.jcsdl-logic-token.filter:hover {
  color: #388cb8;
  border-color: #388cb8;
}
.jcsdl-logic-token.operator {
  color: #ccc;
}
.jcsdl-filter-info.id {
  border: 2px solid #ddd;
  border-radius: 0;
}
.jcsdl-filters-list.expanded .jcsdl-filter.on .jcsdl-filter-info.id {
  color: #388cb8;
  border-color: #388cb8;
}
/* Filters */
.jcsdl-filters-list {
  margin-top: 15px;
  padding: 0;
}
.jcsdl-filter {
  background: #fff;
  margin: 15px 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
}
.jcsdl-filter .jcsdl-filter-options {
  border: 0;
  background: 0;
  top: 10px;
}
.jcsdl-filter .jcsdl-filter-options span {
  display: none;
}
.jcsdl-filter .jcsdl-filter-options a {
  border-color: #ccc;
  color: #ccc;
  border-radius: 0;
  border: 2px solid #ccc;
  background: #f6f6f5;
  font-size: 11px;
  padding: 6px 12px;
  margin: 0 4px;
}
.jcsdl-filter .jcsdl-filter-options a:hover {
  border-color: #777;
  color: #777;
}
.jcsdl-filter .jcsdl-filter-options a.delete:hover {
  border-color: #E86161;
  color: #E86161;
}
.jcsdl-tag-field input {
  background: #f6f6f5;
  margin-left: 10px !important;
}
.jcsdl-filter-save {
  width: 140px;
}
.jcsdl-carousel-scroll {
  background: transparent url("../themed/jcsdl/img/elements.png?22") no-repeat -56px -89px;
}
.jcsdl-input-slider .jcsdl-slider .ui-slider-handle {
  background: transparent url("../themed/jcsdl/img/elements.png?22") no-repeat -152px -83px;
}
.jcsdl-input-slider .jcsdl-slider-controls .jcsdl-slider-minus {
  background: transparent url("../themed/jcsdl/img/elements.png?22") no-repeat -129px -89px;
}
.jcsdl-input-slider .jcsdl-slider-controls .jcsdl-slider-plus {
  background: transparent url("../themed/jcsdl/img/elements.png?22") no-repeat -115px -89px;
}
.jcsdl-filter-editor .jcsdl-step.selected .jcsdl-filter-target-field-wrap {
  background: transparent url("../themed/jcsdl/img/select.png?14") no-repeat center -255px;
}
.jcsdl-filter-editor .jcsdl-step .jcsdl-filter-target-wrap {
  background: transparent url("../themed/jcsdl/img/select.png?14") no-repeat center -378px;
}
.jcsdl-filter-editor .jcsdl-step .jcsdl-target-help {
  background: url("../themed/jcsdl/img/select.png?14") no-repeat -17px -862px;
}
.jcsdl-filter-editor .jcsdl-step.selected .jcsdl-filter-target-field-input-wrap {
  background: transparent url("../themed/jcsdl/img/select.png?14") no-repeat center -255px;
}
.jcsdl-filter-editor .jcsdl-step.selected {
  background: transparent url("../themed/jcsdl/img/step_background_.png?5") no-repeat bottom center;
}
.jcsdl-icon.operator.selected {
  border-color: #388cb8;
}
.jcsdl-input-select .jcsdl-input-select-option.jcsdl-btn.selected {
  border-color: #388cb8;
  color: #388cb8;
}
.jcsdl-container a:hover,
.jcsdl-popup a:hover {
  color: #388cb8;
}
.tipsy .tipsy-arrow {
  border-color: #388cb8 transparent transparent transparent;
}
.tipsy .tipsy-inner {
  border-color: #388cb8;
}
/* Footer */
.jcsdl-footer {
  margin-top: 15px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 15px 15px 10px;
}
.jcsdl-footer .jcsdl-button {
  padding: 12px 16px;
}
/* Output */
h3 {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  text-align: center;
  font-weight: normal;
  font-size: 15px;
  margin-top: 40px;
  color: #aaa;
}
#jcsdl-edit-output {
  border: 1px solid #ddd;
  background: #fff;
  padding: 30px;
  width: 60% !important;
}
